<template>
	<div>
		<breadcrumb></breadcrumb>

		<!-- 列表 -->
		<div class="main">
			<div class="main_head">
			</div>
			<div class="list">
				<el-table :data="resultDate" style="width: 100%" header-align="left" ref="table">
					<el-table-column align="left" prop="SerialNumber" width="80" label="序号">
						<template slot-scope="scope">
							<div class="switchBox">
								{{ (pageCurrent - 1) * data.size + 1 + scope.$index }}
							</div>
						</template>
					</el-table-column>
					<el-table-column align="left" prop="transSeqNo" label="订单编号"></el-table-column>
					<el-table-column align="left" prop="transSeqNo" label="流水号"></el-table-column>
					<el-table-column align="left" prop="amount" label="金额"></el-table-column>
					<el-table-column align="left" prop="payeeMemberName" label="司机"></el-table-column>
					<el-table-column align="left" prop="payeeMemberName" label="手机号"></el-table-column>
					<el-table-column align="left" prop="createDate" label="时间"></el-table-column>
				</el-table>
			</div>
			<!-- 分页 -->
			<div class="paginationBox">
				<el-pagination @current-change="changePages($event)" class="pagination" background
					layout="slot,prev, pager, next" :current-page.sync="pageCurrent" :total="data.total * 1"
					:page-size="data.size * 1" :pager-count="5">
					<template slot>
						<span style="
                color: #686868;
                font-size: 12px;
                margin-right: 20px;
                display: inline-block;
              ">
							共{{ data.total }}条,每页{{ data.size }}条
						</span>
					</template>
				</el-pagination>
			</div>
		</div>
	</div>
</template>

<script>
import breadcrumb from "@/components/breadcrumb";
import httpApi from "@/http";

export default {
	data() {
		return {
			resultDate: [],
			pageCurrent: 0,
			data: {
				total: 0,
				size: 10,
			}
		};
	},
	methods: {
		changePages(val) {
			//页码变化时
			this.pageCurrent = val;
			this.init(val);
		},
		init(val) {
			this.pageCurrent = val;
			let params = {
				pageIndex: val,
				pageSize: 10,
				isSuccess: 1,
				businessType: 91
			};
			// console.log("参数", params);
			httpApi.basicSettingApi.queryPageWalletIndex(params).then((res) => {
				console.log(res, 11111)
				if (res.data == 200) {
					var date = res.data.data.data;
					this.data.total = date.pageInfo.totalSize;
					this.resultDate = res.data.data.data.resultList;
					this.resultDate.forEach((item, i) => {
						let time = item.createDate * 1
						item.createDate = this.formatting(time)
					})
					this.resultDate = JSON.parse(JSON.stringify(this.resultDate))
				}

			});
		},
		formatting(e) {
			var time = new Date(e);
			var y = time.getFullYear();
			var m = time.getMonth() + 1;
			var d = time.getDate();
			var h = time.getHours();
			var mm = time.getMinutes();
			var s = time.getSeconds();
			return y + '-' + (m<10?'0'+m:m) + '-' + (d<10?'0'+d:d) + ' ' +(h<10?'0'+h:h) + ':' + (mm<10?'0'+mm:mm) +
					':' + (s<10?'0'+s:s)
		},
		// 记录滚动距离
		scrollEvent(res) {
			this.$route.meta.scrollTop = res.target.scrollTop
		},
	},
	mounted() {
		this.init(this.pageCurrent);
	},
	components: {
		breadcrumb,
	},
	activated() {
		//组件激活时监听表格滚动条位置,
		this.$refs.table.bodyWrapper.addEventListener('scroll', this.scrollEvent, false)
		// 激活设置滚动位置
		this.$refs.table.bodyWrapper.scrollTop = this.$route.meta.scrollTop
	},
	beforeRouteLeave(to, from, next) {
		// 为了节省资源，再离开页面的时候关闭对于scroll事件的监听
		this.$refs.table.bodyWrapper.removeEventListener('scroll', this.scrollEvent)
		next()
	},
};
</script>

<style lang="scss" scoped>
.main {
	width: 100%;
	height: calc(100vh - 127px);
	background-color: #fff;
	padding: 0px 30px 0px 30px;

	.main_head {
		display: flex;
		justify-content: space-between;
		height: 64px;
		align-items: center;

		.main_head_left {
			font-size: 12px;
			color: #262626;
		}

		.main_head_right {
			.addCargoOwner {
				background-color: #1890ff;
				border-radius: 4px;
				height: 32px;
				color: #ffffff;
				font-size: 12px;
				padding: 8px 17px 9px 17px;
				transition: 0.2s;
				cursor: pointer;
				margin-right: 17px;

				.iconBtn {
					margin-right: 7px;
					font-size: 12px;
				}

				&:hover {
					opacity: 0.8;
				}
			}
		}
	}

	.list {
		height: calc(100% - 112px);

		.switchBox {
			display: flex;
			align-items: center;

			.rightText {
				font-size: 12px;
				color: #595959;
			}
		}

		::v-deep .el-table__body-wrapper {
			height: calc(100vh - 287px) !important;
			overflow-y: scroll;
		}

		// 表头样式
		::v-deep .el-table__header th {
			background-color: #f0f6fd;
			color: #262626;
			font-size: 12px;
			font-weight: bold;
			height: 48px;
			padding: 0;
			text-align: left;

			// 表 body的td
			::v-deep .el-table__body td {
				color: #595959;
				font-size: 12px;
			}
		}

		.stateBtns {
			height: 30px;

			::v-deep .el-button {
				font-size: 12px;
				border: none;
				width: 76px;
				height: 30px;
				margin: 0 auto;
				box-sizing: border-box;
			}

			.icon-dian {
				font-size: 12px;
			}

			.Pass {
				background-color: #ecf5fe;
				color: #1890ff;
				display: flex;
				justify-content: center;
				align-items: center;
				padding: 10px 10px 9px;
			}

			.noPass {
				background-color: #fde8e9;
				color: #f7555d;
				display: flex;
				justify-content: center;
				align-items: center;
			}
		}
	}
}

.dialog {

	// 标题
	::v-deep .el-dialog__header {
		border-bottom: 1px solid #f0f0f0;
		padding: 15px 20px;
		color: #262626;
		font-size: 14px;
		font-weight: bold;
		height: 50px;
	}

	::v-deep .el-dialog__title {
		font-size: 14px;
		color: #303133;
		font-weight: bold;
	}

	//关闭图标
	::v-deep .el-dialog__headerbtn .el-dialog__close {
		font-size: 15px;
	}

	::v-deep .el-dialog__body {
		padding: 25px 64px 82px;
	}

	//   表格
	::v-deep .el-form-item__label {
		line-height: 32px;
		font-size: 12px;
		color: #262626;
		padding-top: 4px;
		width: 100%;
	}

	::v-deep .el-input__inner {
		line-height: 32px;
		height: 32px;
		padding: 0 10px;
	}

	.cancelBtn {
		width: 80px;
		height: 36px;
		border: 1px solid #d9d9d9;
		color: #262626;
		font-size: 12px;
		border-radius: 4px;
		background-color: #fff;
	}

	.submitBtn {
		background-color: #1890ff;
		width: 80px;
		height: 36px;
		color: #fff;
		border-radius: 4px;
		font-size: 12px;
	}

	.inputSelect_left {
		height: 32px;

		::v-deep .el-input__inner {
			border-radius: 4px 0px 0px 4px;
		}
	}

	.inputSelect_right {
		height: 32px;

		::v-deep .el-input__inner {
			border-radius: 0px 4px 4px 0px;
			border-left: none;
			background-color: #f5f7fa;
			font-size: 12px;
			color: #606266;
		}
	}

	::v-deep .el-input__icon {
		line-height: 0;
	}

	::v-deep .el-form-item__content {
		line-height: 0;
	}

	.notes ::v-deep .el-textarea .el-input__count {
		bottom: 15px;
		color: #c0c4cc;
	}
}

.paginationBox {
	width: 100%;
	background-color: #fff;
	display: flex;
	height: 48px;
	align-items: center;

	.pagination {
		margin-left: auto;
	}
}
</style>